<template>
  <div class="">

    <div class="mobileLogo" v-if="!pcshow">
      <img
        @click="phoneclick"
        src="@/assets/images/backindex.png"
        style="
          width: 50px;
          height: 50px;
          padding: 10px;
          position: absolute;
          left: 0%;
        "
      />
      <img
        @click="phoneclick2"
        src="@/assets/images/engH.png"
        style="
          width: 100px;
          height: 50px;
          padding: 10px;
          position: absolute;
          right: 0%;
        "
      />
    </div>
    <div>
      <div>

        <!--PC端  Mmenu-->
        <div class="top" :style="style" v-if="pcshow">
          <!-- newstyle  :style="padding-right: calc(50vw - 600px);"-->
          <div style="padding-top:10px;;height:38px;display:flex;flex-direction:row;justify-content:flex-end" class="newstyle">
            <a href="https://www.xiqiaoshantour.com/cn?ids=1"><div class="but1" style="width:97px;height:35px;display:block" @mouseout="but1removeActive($event)"  @mouseover="but1mouseOver($event)"></div></a>
            <a href="https://www.xiqiaoshantour.com/jpn"><div class="but3" style="width:97px;height:35px;display:block" @mouseout="but3removeActive($event)"  @mouseover="but3mouseOver($event)"></div></a>
            <a href="https://www.xiqiaoshantour.com/en"><img src="../assets/images/enH.png" style="width:97px;height:35px;display:block"  /></a>
             <img
                src="../assets/images/newlogom2.png"
                style="width: 70px; height: 25px; display: block;margin-top: 6px;margin-right: 10px;;margin-left:10px"
            />
            <img
                src="../assets/images/logoH.png"
                style="width: 65px; height: 60px; display: block;margin-top: -11px;"
            />

            </div>

          <nav>
            <ul>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  :style="chooseValue == 1 ? display : normal"
                  @click="changeIndex"
                  >Home</a
                >
                <!-- //首页 -->
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  @mouseover="mouseover2"
                  @click="changeScenery"
                  :style="chooseValue == 2 ? display : normal"
                  >Attractions</a
                >
                <!-- //景区介绍 -->
                <div
                  class="menuItem2"
                  v-show="menuItem2Show"
                  @mouseleave="mouseleave2"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <div
                        v-for="scenicSpot in scenicSpotList"
                        :key="scenicSpot.key"
                      >
                        <el-col>
                          <div
                            class="firstMenufont"
                            @click="seeInfo(scenicSpot)"
                          >
                            {{ scenicSpot.title }}
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- <div style="height:30px">点击查看更多</div> -->
                  <div style="height:30px"></div>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  @mouseover="mouseover3"
                  @click="seePhoto()"
                  :style="chooseValue == 3 ? display : normal"
                  >Photography Showcase</a
                >
                <div
                  class="menuItem3"
                  v-show="menuItem3Show"
                  @mouseleave="mouseleave3"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <div v-for="photo in photoList" :key="photo.key">
                        <el-col>
                          <div
                            class="firstMenufont"
                            @click="seePhotoInfo(photo)"
                          >
                            {{ photo.title }}
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="height:30px"></div>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  :style="chooseValue == 4 ? display : normal"
                  @mouseover="mouseover4"
                  @click="seeAudio()"
                  >Audio Guide</a
                >
                <div
                  class="menuItem4"
                  v-show="menuItem4Show"
                  @mouseleave="mouseleave4"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <div v-for="audio in audioList" :key="audio.key">
                        <el-col>
                          <div
                            class="firstMenufont"
                            @click="seeAudioInfo(audio)"
                          >
                            {{ audio.title }}
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="height:30px"></div>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <img
                  src="../assets/xqsimage/toplogo.png"
                  style="width:196px;height:194px"
                />
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>

              <li>
                <a
                  href="#"
                  :style="chooseValue == 7 ? display : normal"
                  @click="seeVideo()"
                  @mouseover="mouseover7"
                  >Video Appreciation</a
                >
                <div
                  class="menuItem4"
                  v-show="menuItem7Show"
                  @mouseleave="mouseleave7"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <div v-for="video in videoList" :key="video.key">
                        <el-col>
                          <div
                            class="firstMenufont"
                            @click="seeVideoInfo(video)"
                          >
                            {{ video.title }}
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="height:30px"></div>
                </div>
              </li>

              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  class="hoverMenu"
                  @mouseover="mouseover5"
                  @click="changePanorama"
                  :style="chooseValue == 5 ? display : normal"
                  >720-degree Panoramic Tour </a
                >
                <div
                  class="menuItem5"
                  v-show="menuItem5Show"
                  @mouseleave="mouseleave5"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <div v-for="panorama in panoramaList" :key="panorama.key">
                        <el-col>
                          <div
                            class="firstMenufont"
                            @click="toWailian(panorama.url)"
                          >
                            {{ panorama.title }}
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="height:30px"></div>
                </div>
              </li>

              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  @mouseover="mouseover6"
                  @click="changeFood(4)"
                  :style="chooseValue == 6 ? display : normal"
                  >Transportation</a
                >
                <div
                  class="menuItem6"
                  v-show="menuItem6Show"
                  @mouseleave="mouseleave6"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <div v-for="traffic in trafficList" :key="traffic.key">
                        <el-col>
                          <div
                            class="firstMenufont"
                            @click="seeTrafficInfo(traffic)"
                          >
                            {{ traffic.title }}
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="height:30px"></div>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px"
                /></a>
              </li>
            </ul>
          </nav>
        </div>

        <!--移动端  Mmenu-->
        <nav id="mmenu" v-show="showPage">
          <div
            style="position:absolute;z-index:999;left:0;top:40px;width:200px"
          >
            <el-menu class="el-menu-vertical-demo">
              <el-submenu index="1">
                <template slot="title">
                  <span @click="changeIndex">Home</span>
                </template>
              </el-submenu>

              <el-submenu index="5">
                <template slot="title">
                  <span @click="changeScenery">Attractions</span>
                </template>
                <div v-for="scenicSpot in scenicSpotList" :key="scenicSpot.key">
                  <el-col>
                    <el-menu-item-group
                      ><div @click="seeInfo(scenicSpot)">
                        {{ scenicSpot.title }}
                      </div>
                    </el-menu-item-group>
                  </el-col>
                </div>
              </el-submenu>

              <el-submenu index="4">
                <template slot="title">
                  <span @click="seePhoto">Photography Showcase</span>
                </template>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <span @click="seeAudio">Audio Guide</span>
                </template>
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <span @click="seeVideo">Video Appreciation</span>
                </template>
              </el-submenu>

              <el-submenu index="7">
                <template slot="title">
                  <span @click="changePanorama">720-degree Panoramic Tour </span>
                </template>
              </el-submenu>

              <el-submenu index="6">
                <template slot="title">
                  <span @click="changeFood(4)">Transportation</span>
                </template>
              </el-submenu>
            </el-menu>
          </div>
        </nav>

        <nav id="mmenu" v-show="showPage2">
          <div
            style="
              position: absolute;
              z-index: 999;
              right: 0;
              top: 40px;
              width: 150px;
            "
          >
            <el-menu class="el-menu-vertical-demo">
              <el-menu-item index="1" @click="handleOpen1">
                <span slot="title">中文版</span>
              </el-menu-item>

              <el-menu-item index="2" @click="handleOpen2">
                <span slot="title">日本語</span>
              </el-menu-item>

              <el-menu-item index="3" @click="handleOpen3">
                <span slot="title">ENGLISH</span>
              </el-menu-item>
            </el-menu>
          </div>
        </nav>

        <!--banner轮播图PC端-->
        <div class="banner" style="background:#FFF5E0" v-if="pcshow">
          <div class="bannerTop" >
            <el-carousel indicator-position="outside" height="599px">
              <el-carousel-item v-for="item in bannerUrl" :key="item.id">
                <img :src="item.url" style="width:100%;height:100%" />
              </el-carousel-item>
            </el-carousel>
            <!-- <a v-if="pcshow"><img :src="bannerUrl" style="width:1538px;height:588px"/></a> -->
          </div>
        </div>
        <!--banner轮播图移动端-->
        <div class="banner" style="background:#FFF5E0" v-if="!pcshow">
           <a ><img :src="bannerUrl[0].url"/></a>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import {
  getFoodList,
  getLiveList,
  getPlayList,
  getTrafficList,
  getBannerList,
  getScenicSpotList,
  getCultureCustomList,
  getCultureCelebrityList,
  getOutineAreaList,
  getRoadList,
  getPanorama,
  getAudio,
  getPhoto,
  getVideo
} from '../request/api'
export default {
  props: ['chooseValue'],
  data () {
    return {
      // ../assets/images/cnB.png  D:\newcode\xqs_en\src\assets\images\cnB.png
      // src1:'http://gangmao.oss-cn-shenzhen.aliyuncs.com/company/20200322/Home_mz_qbgd-vc-upload-1584880764648-2.png',
      src1: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/company/20200322/Home_mz_qbgd-vc-upload-1584880764648-2.png',
      normal: { color: '#333333' },
      display: { color: '#840207' },
      menuItem1Show: false,
      menuItem2Show: false,
      menuItem3Show: false,
      menuItem4Show: false,
      menuItem5Show: false,
      menuItem6Show: false,
      menuItem7Show: false,
      showPage: false,
      showPage2: false,
      pcshow: true,
      style: {},
      foodList: [],
      liveList: [],
      playList: [],
      trafficList: [],
      scenicSpotList: [],
      customList: [],
      celebrityList: [],
      outineAreaList: [],
      panoramaList: [],
      audioList: [],
      roadList: [],
      photoList: [],
      videoList: [],
      bannerUrl:
        'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/20210220/banner1.png'
    }
  },
  created () {
    if (this._isMobile()) {
      this.style.height = 50 + 'px'
      this.pcshow = false
    } else {
      this.style.height = 112 + 'px'
      this.pcshow = true
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  mounted () {
    this.getBannerListFunction()
    this.getScenicSpotListFunction()
    this.getPanoramaFunction()
    this.getAudioFunction()
    this.getTrafficListFunction()
    this.getPhotoFunction()
    this.getVideoFunction()
  },
  methods: {
    handleOpen1 () {
      window.location.href = 'https://www.xiqiaoshantour.com/index'
    },
    handleOpen2 () {
      window.location.href = 'https://www.xiqiaoshantour.com/jpn'
    },
    handleOpen3 () {
      window.location.href = 'https://www.xiqiaoshantour.com/en'
    },
    but1removeActive ($event) {
      $event.currentTarget.className = 'but1'
    },
    but3removeActive ($event) {
      $event.currentTarget.className = 'but3'
    },
    but1mouseOver ($event) {
      $event.currentTarget.className = 'but1_2'
    },
    but3mouseOver ($event) {
      $event.currentTarget.className = 'but3_2'
    },
    // 写真
    getPhotoFunction () {
      getPhoto(this.HOST)
        .then(response => {
          this.photoList = response.data
        })
        .catch(error => {})
    },
    // 语音
    getAudioFunction () {
      getAudio(this.HOST)
        .then(response => {
          this.audioList = response.data
        })
        .catch(error => {})
    },
    // 720
    getPanoramaFunction () {
      getPanorama(this.HOST)
        .then(response => {
          this.panoramaList = response.data
        })
        .catch(error => {})
    },
    // 视频
    getVideoFunction () {
      getVideo(this.HOST)
        .then(response => {
          this.videoList = response.data
        })
        .catch(error => {})
    },
    // 道路
    getRoadListFunction () {
      getRoadList(this.HOST)
        .then(response => {
          this.roadList = response.data
        })
        .catch(error => {})
    },

    // 名胜区
    getOutineAreaListFunction () {
      getOutineAreaList(this.HOST)
        .then(response => {
          this.outineAreaList = response.data
        })
        .catch(error => {})
    },
    // 文化
    getCultureCustomListFunction () {
      getCultureCustomList(this.HOST)
        .then(response => {
          this.customList = response.data
        })
        .catch(error => {})
    },

    // 有名人物
    getCultureCelebrityListFunction () {
      getCultureCelebrityList(this.HOST)
        .then(response => {
          this.celebrityList = response.data
        })
        .catch(error => {})
    },

    // 景点
    getScenicSpotListFunction () {
      getScenicSpotList(this.HOST)
        .then(response => {
          this.scenicSpotList = response.data
        })
        .catch(error => {})
    },

    // 轮播图
    getBannerListFunction () {
      getBannerList(this.HOST)
        .then(response => {
          this.bannerUrl = response.data
        })
        .catch(error => {})
    },
    // 美食
    getFoodListFunction () {
      getFoodList(this.HOST)
        .then(response => {
          this.foodList = response.data
        })
        .catch(error => {})
    },
    // 住宿
    getLiveListFunction () {
      getLiveList(this.HOST)
        .then(response => {
          this.liveList = response.data
        })
        .catch(error => {})
    },
    // 购物
    getPlayListFunction () {
      getPlayList(this.HOST)
        .then(response => {
          this.playList = response.data
        })
        .catch(error => {})
    },
    // 交通
    getTrafficListFunction () {
      getTrafficList(this.HOST)
        .then(response => {
          this.trafficList = response.data
        })
        .catch(error => {})
    },

    // 判断是PC端还是手机端
    _isMobile () {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
    phoneclick () {
      this.showPage = !this.showPage
    },
    phoneclick2 () {
      this.showPage2 = !this.showPage2
    },
    handleScroll () {
      this.menuItem1Show = false
      this.menuItem2Show = false
      this.menuItem3Show = false
      this.menuItem4Show = false
      this.menuItem5Show = false
      this.menuItem6Show = false
      this.menuItem7Show = false
    },
    mouseover1 () {
      this.menuItem1Show = true
      this.menuItem2Show = false
      this.menuItem3Show = false
      this.menuItem4Show = false
      this.menuItem5Show = false
      this.menuItem6Show = false
      this.menuItem7Show = false
    },
    mouseleave1 () {
      this.menuItem1Show = false
    },
    mouseover2 () {
      this.menuItem1Show = false
      this.menuItem2Show = true
      this.menuItem3Show = false
      this.menuItem4Show = false
      this.menuItem5Show = false
      this.menuItem6Show = false
      this.menuItem7Show = false
    },
    mouseleave2 () {
      this.menuItem2Show = false
    },
    mouseover3 () {
      this.menuItem1Show = false
      this.menuItem2Show = false
      this.menuItem3Show = true
      this.menuItem4Show = false
      this.menuItem5Show = false
      this.menuItem6Show = false
      this.menuItem7Show = false
    },
    mouseleave3 () {
      this.menuItem3Show = false
    },
    mouseover4 () {
      this.menuItem1Show = false
      this.menuItem2Show = false
      this.menuItem3Show = false
      this.menuItem4Show = true
      this.menuItem5Show = false
      this.menuItem6Show = false
      this.menuItem7Show = false
    },
    mouseleave4 () {
      this.menuItem4Show = false
    },
    mouseover5 () {
      this.menuItem1Show = false
      this.menuItem2Show = false
      this.menuItem3Show = false
      this.menuItem4Show = false
      // this.menuItem5Show = true;
      this.menuItem6Show = false
      this.menuItem7Show = false
    },
    mouseleave5 () {
      this.menuItem5Show = false
    },
    mouseover6 () {
      this.menuItem6Show = true
      this.menuItem2Show = false
      this.menuItem3Show = false
      this.menuItem4Show = false
      this.menuItem5Show = false
      this.menuItem1Show = false
      this.menuItem7Show = false
    },
    mouseleave6 () {
      this.menuItem6Show = false
    },
    mouseleave7 () {
      this.menuItem7Show = false
    },
    mouseover7 () {
      this.menuItem7Show = true
      this.menuItem2Show = false
      this.menuItem3Show = false
      this.menuItem4Show = false
      this.menuItem5Show = false
      this.menuItem1Show = false
      this.menuItem6Show = false
    },
    // 写真列表详情
    seePhotoInfo (e) {
      this.$router.push({
        path: '/photoInfo',
        query: {
          id: e
        }
      })
    },
    // 写真列表
    seePhoto () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/photo'
      })
      this.showPage = false
    },
    // 语音详情
    seeAudioInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/VoicePlay',
        query: {
          id: e
        }
      })
      this.showPage = false
    },
    // 语音列表
    seeAudio () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/vioce'
      })
      this.showPage = false
    },
    // 视频列表
    seeVideo () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/video'
      })
      this.showPage = false
    },
    // 视频详情
    seeVideoInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/videoPlay',
        query: {
          id: e
        }
      })
      this.showPage = false
    },
    // 全景列表
    changePanorama () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/panorama'
      })
      this.showPage = false
    },
    // 全景跳转
    toWailian (e) {
      window.open(e, '_blank')
    },
    // 美食跳转
    changeFood (infoid) {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/food',
        query: {
          id: infoid
        }
      })
      this.showPage = false
    },
    // 概要
    changeOutline () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/'
      })
    },
    // 景区
    changeScenery () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/scenery'
      })
    },
    // 详情()
    seeInfo (infoid) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/sceneryInfo',
        query: {
          id: infoid
        }
      })
      this.showPage = false
    },
    // 交通详情()
    seeTrafficInfo (infoid) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/traffic',
        query: {
          id: infoid
        }
      })
      this.showPage = false
    },
    // 文化
    changeCustoms () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/customs'
      })
    },
    // 文化详情()
    seeCustomsInfo (infoid) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/customsInfomation',
        query: {
          id: infoid
        }
      })
    },
    // 名人物语
    changeCelebrity () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/celebrity'
      })
    },
    // 名人物语详情
    seeCelebrityInfo (infoid) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/celebrityInfomation',
        query: {
          id: infoid
        }
      })
      this.showPage = false
    },
    // 名胜区
    changeScenicSpots () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/scenicSpots'
      })
    },
    // 情报
    changeInfo () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/information'
      })
    },
    // 道路
    changeRoad () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/road'
      })
    },
    // 历史
    changeHistory () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/history'
      })
    },
    // 首页changeIndex
    changeIndex () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style>
@media screen and (min-width:2000px){
    .newstyle {
    padding-right: calc(50vw - 800px);
  }
}
 @media screen and (min-width: 1681px) and (max-width: 1980px) {
  .newstyle {
    padding-right: calc(50vw - 800px);
  }
}
 @media screen and (min-width: 1601px) and (max-width: 1680px) {
  .newstyle {
    padding-right: calc(50vw - 560px);
  }
}
 @media screen and (min-width: 1501px) and (max-width: 1600px) {
  .newstyle {
    padding-right: calc(50vw - 450px);
  }
}
 @media screen and (min-width: 1401px) and (max-width: 1500px) {
  .newstyle {
    padding-right: calc(50vw - 220px);
  }
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
  .newstyle {
    padding-right: calc(50vw - 100px);
  }
}

.but1{
  background-image: url('../assets/images/cnB.png');
  background-size: 100%;
}
.but1_2{
  background-image: url('../assets/images/cha.png');
  background-size: 100%;
}
.but3{
  background-image: url('../assets/images/jpn.png');
  background-size: 100%;
}
.but3_2{
  background-image: url('../assets/images/jpnH.png');
  background-size: 100%;
}
.top {
  /* 设置宽度高度背景颜色 */
  height: auto;
  min-width: 1920px;
  /* margin-left: calc(50vw - 810px); */
  /* height: 112px; */
  background: #fff5e0;
  position: relative;
  top: 0;
  z-index: 8999;
  /* overflow:scroll; */
}

.mobileLogo {
  height: 50px;
  position: relative;
  top: 0;
  z-index: 9999;
  text-align: left;
  width: 100%;
  background: #fff5e0;
}
.logo {
  position: absolute;
  z-index: 999;
}
.top ul {
  /* 清除ul标签的默认样式 */
  width: auto; /*宽度也改为自动*/
  list-style-type: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 18px;
  font-weight: bold;
  margin: 0px;
  /* margin-left:130px */
  margin-left: calc(50vw - 800px);
  /* margin-top: 0;          */
}
.top li {
  float: left; /* 使li内容横向浮动，即横向排列  */
  margin-right: 25px; /* 两个li之间的距离*/
  text-align: center;
  line-height: 30px;
  position: relative;
  overflow: hidden;
}

.top li a {
  /* 设置链接内容显示的格式*/
  display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
  text-align: center;
  overflow: hidden;
  text-decoration: none; /* 去除下划线 */
  font-weight: 600;
  color: #333333;
  font-family: "Microsoft YaHei";
  padding: 0px;
  margin-top: 20px;
  padding-bottom: 41px;
}
.top li a:hover {
  /* 鼠标选中时背景变为黑色 */
  /* background-color: #111; */
  color: #840207;
}
.top ul li ul {
  /* 设置二级菜单 */
  margin-left: -0.2px;
  background: rgb(189, 181, 181);
  position: relative;
  display: none; /* 默认隐藏二级菜单的内容 */
  width: 100px;
}
/* .top li a {
  font-weight: 600 !important;
  font-size: 30px;
} */
.top ul li ul li {
  /* 二级菜单li内容的显示 */

  float: none;
  text-align: center;
}
.top ul li:hover ul {
  /* 鼠标选中二级菜单内容时 */
  display: block;

  height: 512px;
  background: #9c242a;
  border-radius: 10px;
}
.menuItem6 {
  min-width: 300px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: 13px;
  margin-left:-90px
}
.menuItem1 {
  min-width: 300px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: 13px;
}
.menuItem2 {
  min-width: 300px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: 13px;
}
.menuItem3 {
  min-width: 300px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: 13px;
}
.menuItem4 {
  min-width: 300px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: 13px;
}
.menuItem5 {
  min-width: 300px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: 13px;
}
.secondMenuItemFont {
  font-size: 14px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #fff5e0;
  line-height: 30px;
  text-align: left;
}

.firstMenufont {
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: bold;
  color: #fff5e0;
  line-height: 40px;
  cursor: pointer;
}
.firstMenufontMobile {
  font-weight: 300;
  font-size: 14px;
  font-family: "Microsoft YaHei";
}

.firstMenufont:hover {
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: bold;
  color: #840207;
  line-height: 40px;
  cursor: pointer;
}
.secondMenuFont:hover {
  color: #840207;
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.bannerTop {
  margin-top: 10px;
  width: 1538px;
  margin-left: calc((100vw - 1538px) / 2);
}
</style>
